<template>
    <div>
        <el-form :model="form" :rules="rules" ref="reForm" label-width="120px" label-position="left" class="mb_40">
            <el-form-item label="支付方式：" prop="pay_type">
                    <el-select v-model="form.pay_type" placeholder="支付方式">
                        <el-option label="微信支付" :value="2"></el-option>
                        <el-option label="支付宝支付" :value="1"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="姓名：" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别：" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                    <!-- <el-option label="保密" :value="0"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.pay_type==1" label="账号：" prop="account">
                <el-input v-model="form.account" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item  v-if="form.pay_type==2" label="二维码：" prop="photo">
                <div class="imgbox">
                    <i v-if="form.photo" class="el-icon-error closeicon" @click="cleanImg"></i>
                    <input type="file" id="pageData" class="uploadimg" accept="image/*" @change="upload" />
                    <img v-if="form.photo" :src="form.photo" alt="" srcset="" class="img">
                    <span v-else class="picmsg">请上传图片</span>
                </div>
            </el-form-item>
            <el-form-item label="联系方式：" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入联系方式" />
            </el-form-item>
            <el-form-item label="家庭住址：" prop="address">
                <el-input v-model="form.address" placeholder="请输入家庭住址" />
            </el-form-item>
        </el-form>
        <div class="dialog-userfooter">
            <el-button @click="handleCancle">取 消</el-button>
            <el-button type="primary" :loading='loading' @click="handleSave">确 定</el-button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { editInfo } from '@/api/user';
import { uploadPhoto } from '@/api/comm';
import { isOverSize,validPhone } from '@/utils/validate';
export default {
    data(){
        return {
            form:{
                pay_type:1,
                name:'',
                sex:'',
                account:'',
                phone:'',
                address:"",
                photo:''
            },
            rules:{
                pay_type:[{ required: true, message: '请选择支付方式', trigger: 'change' }],
                name:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
                // pay:[{ required: true, message: '请选择支付方式', trigger: 'change' }],
                sex:[{ required: true, message: '请选择性别', trigger: 'change' }],
                account:[{ required: true, message: '请输入账号', trigger: 'blur' }],
                phone:[{ required: true, validator:validPhone, trigger: 'blur' }],
                address:[{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
                photo:[{ required: true, message: '请上传图片', trigger: 'change' }],
            },
            loading:false
        }
    },

    computed: {
        ...mapState({
            user: state => state.user.user,
        }),
    },

    created(){
        console.log('user:',this.user);
        this.form.pay_type = this.user.pay_type;
        this.form.name = this.user.name;
        this.form.sex = this.user.sex;
        this.form.account = this.user.account;
        this.form.phone = this.user.phone;
        this.form.address = this.user.address;
        this.form.photo = this.user.url;
        // console.log(this.user);
        // if(this.user){
        //     this.userparams.uid = this.user.id;
        //     this.user_login=this.user.user_login;
        //     this.userparams.role = [this.user.roleuser.role_id];
        // }
    },
    methods:{

        // 上传图片
        upload(event){
            var file=event.currentTarget.files[0];
            console.log('file:',file,event);
            if(isOverSize(file.size,5)){
                this.$message.warning(2,"图片大小不能超过5MB");
                return;
            }
            var formData = new FormData();
            formData.append('photo', file);
            uploadPhoto(formData).then(res=>{
                if(res.code == 1){
                    // console.log('图片：',res.data);
                    this.$message.success('上传成功');
                    let url = res.data.replace('\\','/');
                    this.form.photo = process.env.VUE_APP_BASE_API+'/'+url;
                    document.getElementById('pageData').value=null;
                }
            })
        },

        cleanImg(){
            this.form.photo = '';
            document.getElementById('pageData').value=null;
        },
        
        

        handleSave(){
            this.$refs.reForm.validate(valid=>{
                if(!valid) return;
                let params = {
                    pay_type:this.form.pay_type,
                    name:this.form.name,
                    sex:this.form.sex,
                    phone:this.form.phone,
                    address:this.form.address,
                }
                if(params.pay_type == 1){
                    params.account = this.form.account;
                }else{
                    params.account = this.form.photo;
                }
                this.loading = true;
                editInfo(params).then(res=>{
                    if(res.code == 1){
                        this.$message.success('修改成功');
                        this.$store.dispatch('user/getInfo');
                        this.handleCancle(1)
                    }
                    this.loading = false;
                })
                this.handleCancle(1)
            })
        },

        handleCancle(type){
            this.$emit('close',type)
        },
    }
}
</script>
<style lang="scss" scoped>
.imgbox{
    width: 120px;
    height: 120px;
    border: 1px solid #eee;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    // overflow: hidden;
    .closeicon{
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 20px;
        color: red;
        cursor: pointer;
        display: none;
    }
    &:hover .closeicon{
        display: inline-block;
    }
    .img{
        width: 100%;
        height: 100%;
    }
}
.picmsg{
    color: #999;
}
.uploadimg{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}
</style>